<template>
	<view class="content">
		<view class="top">
			<view :style="{ paddingTop: topheight,height:navheight,lineHeight:navheight }" class="nav">
				<!-- <image src="../../static/img/left.png" mode="widthFix"></image> -->
				<view>还款管理</view>
			</view>
		</view>
		<view class="tab">
			<view class="t_left" :class="{'t_left_c':tabIndex}" @click="tab(true)">
				<image :src="tabIndex?left_n:left_y" class="ln" :class="tabIndex?'up':''" mode="widthFix"></image>
				<view>还款中<text :class="{'line':tabIndex}"></text></view>
			</view>
			<view class="t_right" :class="{'t_right_c':!tabIndex}" @click="tab(false)">
				<image :src="!tabIndex?right_n:right_y" class="ry" :class="!tabIndex?'up':''" mode="widthFix"></image>
				<view>等待审核<text :class="{'line':!tabIndex}"></text></view>
			</view>
		</view>
		<view class="search">
			<uni-icons type="search" class="icon" size="26" color="#999999"></uni-icons>
			<input type="text" confirm-type="search" placeholder-class="pla" placeholder="搜索" v-model="name"
				@confirm="sou" />
			<uni-icons v-if="name" @click="clean()" type="close" class="icon" size="26" color="#999999"></uni-icons>
			<view class="s_btn" @click="sou()">搜索</view>
		</view>
		<view class="info" v-for="item in list" @click="details(item)" v-if="!tabIndex &&item.deal_status<4 ||tabIndex">
			<view class="items">
				<view class="item">
					<view class="phone" @click.stop="call(item)">
						借款人：{{item.name}} {{item.mobile}}
						<uni-icons color="#E99552" class="icon" type="phone" size="22"></uni-icons>
					</view>
					<view>借款金额：<text>￥{{ item.borrow_amount}}</text></view>
					<!-- <view>借款用途：{{!tabIndex? item.type_name:item.usage}} </view> -->
					<view>还款方式：{{item.h_text}} </view>
					<view v-if="tabIndex">借款周期：{{item.repay_time}} </view>
					<!-- <view v-if="tabIndex">已还金额：<text>￥{{item.pay_money}}</text></view> -->
					<view v-if="tabIndex">已还本金：<text>￥{{item.true_self_money}}</text></view>
					<view v-if="tabIndex">已还利息：<text>￥{{item.true_interest_money}}</text></view>
					<view v-if="tabIndex&&item.deal_status==4">下个还款日：{{item.next_date}}</view>
					<view v-if="!tabIndex&&item.publish_wait==3">审核失败原因：{{item.delete_msg}}</view>
				</view>
				<view v-if="!tabIndex&&item.publish_wait!=0" class="del" @click.stop="del(item.id)">
					<uni-icons type="trash" size="24" color="#FF544F" class="icon"></uni-icons>
				</view>
				<view class="imgs" :class="{'mr_50':!tabIndex&&item.publish_wait!=0}">
					<view v-if="tabIndex" @click.stop="plan(item.id)">
						<!-- <view @click.stop="plan(item.ids)"> -->
						<image src="@/static/img/user_icon.png" mode="widthFix"></image>
						<text>还款计划</text>
					</view>
					<image v-if="!tabIndex&&item.publish_wait==1" src="@/static/img/user_img1.png" mode="widthFix">
					</image>
					<image v-if="!tabIndex&&item.publish_wait==3" src="@/static/img/user_img3.png" mode="widthFix">
					</image>
					<image v-if="!tabIndex&&item.publish_wait==0" src="@/static/img/user_img4.png" mode="widthFix">
					</image>
					<image v-if="!tabIndex&&item.publish_wait==2" src="@/static/img/user_img6.png" mode="widthFix">
					</image>
					<image v-if="tabIndex&&item.deal_status==4" src="@/static/img/user_img2.png" mode="widthFix">
					</image>
					<image v-if="tabIndex&&item.deal_status==5" src="@/static/img/user_img5.png" mode="widthFix">
					</image>
				</view>
			</view>
			<!-- <view v-if="!tabIndex&&item.deal_status==4" class="default_btn btn" @click="huan(item)">还款</view> -->
			<view class="btns_2" v-if="tabIndex&&item.deal_status==4">
				<view class="" @click.stop="ren(item)">查看认证</view>
				<!-- <view class="" @click.stop="huan(item)">还款</view> -->
				<view class="" @click.stop="plan(item.id)">还款</view>
			</view>
			<view v-if="tabIndex&&item.deal_status==5" class="default_btn btn" @click="ren(item)">查看认证</view>
		</view>
		<image v-if="list.length<1" class="none" src="@/static/img/img_none.png" mode="widthFix"></image>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="box box1">
				<view class="title">温馨提示</view>
				<view class="text mt_19">确认删除吗?</view>
				<view class="btns">
					<view class="" @click="cancel">取消</view>
					<view class="" @click="deletes()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		loanInfo,
		loanInfoTwo,
		deleteOrder
	} from '@/common/js/index.js'
	export default {
		data() {
			return {
				topheight: uni.getStorageSync('topHeight'),
				totalheight: uni.getStorageSync('totalHeight'),
				navheight: uni.getStorageSync('navHeight'),
				tabIndex: true,
				left_y: require('@/static/img/user_ly.png'),
				left_n: require('@/static/img/user_ln.png'),
				right_y: require('@/static/img/user_ry.png'),
				right_n: require('@/static/img/user_rn.png'),
				page: 1,
				list: '',
				name: '',
				isAll: false,
				id: '',
			}
		},
		onLoad() {},
		onShow() {
			if (this.tabIndex) {
				this.info()
			} else {
				this.select()
			}
		},
		methods: {
			cancel() {
				this.$refs.popup.close()
			},
			del(e) {
				this.id = e
				this.$refs.popup.open('center')
			},
			deletes() {
				this.cancel()
				deleteOrder({deal_id:this.id}).then(res=>{
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功！',
							icon:'none'
						})
						this.select()
					}else {
						uni.showToast({
							title: res.msg,
							icon:'none'
						})
					}
				})
			},
			ren(e) {
				console.log(12121);
				uni.navigateTo({
					url: '/pages/me/authentication?id=' + e.user_id + '&name=' + e.name
				})
			},
			call(e) {
				// if (!this.tabIndex && e.deal_status == 4) {
				uni.makePhoneCall({
					phoneNumber: e.mobile //仅为示例
				});
				// }
			},
			sou(e) {
				// console.log(e.detail.value);
				// if(e.detail.value)this.name = e.detail.value
				if (this.tabIndex) this.info()
				else this.select()
			},
			clean() {
				this.page = 1
				this.name = ''
				if (this.tabIndex) this.info()
				else this.select()
			},
			plan(e) {
				uni.navigateTo({
					url: '/pages/user/plan?id=' + e
				})
			},
			tab(e) {
				this.tabIndex = e
				this.name = ''
				this.page = 1
				if (e) this.info()
				else this.select()
			},
			select() {
				loanInfo({
					page: this.page,
					name: this.name
				}).then(res => {
					if (res.code == 200) {
						let list = res.data.wait_list.data.filter(item => {
							return item.deal_status != 5
						})
						// this.list = list
						var info = this.list
						if (this.page == 1) {
							this.list = list
						} else {
							this.list = info.concat(list)
						}
						this.isAll = this.list.length <10 ? false : true
						console.log(this.isAll);
					}
					console.log(res);
				})
			},
			info() {
				loanInfoTwo({
					page: this.page,
					name: this.name
				}).then(res => {
					// this.list = res.data.wait_list.data
					var info = this.list
					if (this.page == 1) {
						this.list = res.data.wait_list.data
					} else {
						this.list = info.concat(res.data.wait_list.data)
					}
					this.isAll = this.list.length <10 ? false : true
					console.log(res);
				})
			},
			huan(e) {
				uni.navigateTo({
					url: '/pages/user/details?info=' + JSON.stringify(e)
				})
			},
			details(e) {
				if (!this.tabIndex) {
					uni.navigateTo({
						url: '/pages/index/audit?id=' + e.id + '&userId=' + e.user_id
					})
				}
				//  else if (!this.tabIndex && e.deal_status != 5) {
				// 	uni.navigateTo({
				// 		url: '/pages/user/details?info=' + JSON.stringify(e)
				// 	})
				// }
			}
		},
		onReachBottom() {
			console.log(this.isAll);
			if (this.isAll) {
				this.page++;
				if (this.tabIndex) this.info()
				else this.select()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		/* background: white; */
		overflow: hidden;
		padding-top: 280rpx;
	}

	.top {
		width: 100vw;
		height: 280rpx;
		background: url('../../static/img/loans_bg.png') no-repeat;
		background-size: cover;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 399;
	}

	.tab {
		width: 100vw;
		height: 132rpx;
		position: fixed;
		left: 0;
		top: 186rpx;
		z-index: 399;
		// background-color: pink;
		// margin-top: -94rpx;
		// margin-bottom: 40rpx;
		// display: flex;
		// justify-content: space-between;
		// position: relative;

		.t_left {
			width: 486rpx;
			height: 112rpx;
			display: flex;
			// justify-content: center;
			align-items: center;
			position: absolute;
			left: 0;
			bottom: 0;

			image {
				position: absolute;
				left: 0;
				bottom: 0;
			}

			view {
				z-index: 289;
				position: relative;
				display: flex;
				font-size: 32rpx;
				color: white;
				margin-left: 100rpx;
			}

		}

		.t_left_c {
			width: 468rpx;
			height: 132rpx;

			view {
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				margin-left: 120rpx;
			}
		}

		.t_right {
			width: 486rpx;
			height: 112rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: absolute;
			right: 0;
			bottom: 0;

			image {
				position: absolute;
				right: 0;
				bottom: 0;
			}

			view {
				z-index: 289;
				position: relative;
				display: flex;
				font-size: 32rpx;
				color: white;
				margin-right: 112rpx;
			}
		}

		.t_right_c {

			width: 468rpx;
			height: 132rpx;

			view {
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				margin-right: 136rpx;
			}
		}

		.line {
			width: 48rpx;
			height: 8rpx;
			background: #FF534E;
			border-radius: 4rpx;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: -16rpx;
		}


		.ln {
			width: 468rpx;
		}

		.ry {
			width: 486rpx;
		}

		.up {
			z-index: 288;
		}
	}

	.nav {
		width: 100vw;
		position: relative;
		// background-color: white;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 22;

		image {
			width: 16rpx;
			// height: 40rpx;
			position: absolute;
			bottom: 20rpx;
			left: 30rpx;
		}

		view {
			text-align: center;
			font-size: 31rpx;
		}
	}

	.info {
		margin: 0 30rpx 40rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		overflow: hidden;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;

		.items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			// background-color: palegoldenrod;
		}
		
		.del {
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.btn {
			margin-top: 50rpx;
			margin-bottom: 18rpx;
			background: #E99552;
		}

		image {
			width: 160rpx;
		}
		
		.mr_50 {
			margin-right: 50rpx;
		}

		.item {
			.phone {
				display: flex;
				align-items: center;

				.icon {
					margin-left: 6rpx;
				}
			}

			view {
				margin: 0 0 20rpx 0;

				&:nth-of-type(1) {}

				&:nth-of-type(2) {
					margin: 20rpx 0;
				}

				&:last-child {
					margin: 0;
				}

				text {
					color: #FF6548;
					font-weight: 500;
				}
			}
		}

		.imgs {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: flex-end;

			view {
				display: flex;
				margin-bottom: 50rpx;

				text {
					font-size: 26rpx;
					color: #3F93FF;
				}

				image {
					width: 40rpx;
				}
			}
		}
	}

	.search {
		width: 690rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 80rpx auto 40rpx;
		font-size: 28rpx;

		.pla {}

		.icon {
			margin: 0 16rpx 0 30rpx;
		}

		input {
			font-size: 28rpx;
			flex: 1;
		}
		
		.s_btn {
			background: #FF524F;
			color: white;
			font-size: 26rpx;
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}
	}

	.none {
		width: 440rpx;
		display: block;
		margin: 240rpx auto 0;
	}
	
	.box {
		overflow: hidden;
	
		.title {
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			margin: 180rpx 0 52rpx;
		}
	
		.text {
			margin-top: 60rpx;
			margin-bottom: 60rpx;
			text-align: center;
			// margin-top: 20rpx;
			font-size: 28rpx;
		}
	
		.btns {
			display: flex;
			justify-content: space-between;
	
			view {
				width: 220rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 40rpx;
				margin: 22rpx 40rpx;
	
				&:nth-of-type(1) {
					border: 2rpx solid #FFA19E;
					color: #FF534E;
				}
	
				&:nth-of-type(2) {
					background: linear-gradient(to right, #F69F60 0%, #FF706D 100%);
					color: white;
				}
			}
		}
	
		.mt_30 {
			margin-top: 30rpx;
		}
	}
	
	.box1 {
		width: 600rpx;
		height: 552rpx;
		background: url('@/static/img/diong.png') no-repeat;
		background-size: contain;
	}
	
	/deep/ .uni-popup__wrapper {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.btns_2 {
		display: flex;
		justify-content: space-between;

		view {
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 40rpx;
			margin: 52rpx 40rpx 18rpx;
			color: white;

			&:nth-of-type(1) {
				background: #E99552;
			}

			&:nth-of-type(2) {
				// background: linear-gradient(to right, #F69F60 0%, #FF706D 100%);
				background: linear-gradient(to right, #FF5F3B 0%, #FF524F 100%);
			}
		}
	}
</style>